import React, {Component} from "react"
import "@/home.scss"
import myfetch from '@/atool/home.js'
import {Link} from  'react-router-dom'

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            jingpin: [],
            newArr: [1],
            girlArr:[2],
            girl:[],
            girlArrtwo:[],
            boyArr:[3],
            boy:[],
            boyArrtwo:[],
            changxiaoone:'',
            changxiaotwo:[],
            jingxuanshudan:[],
            homelist:[],
            num:0,
            num1:0,
            num2:0

        }
    }

    componentDidMount() {
            console.log((function f(){
                function f(){ return 1; }
                return f();//2
                function f(){ return 2; }
            })())


        myfetch.getjingpin(
            (data) => {
                this.setState({
                    jingpin: data,
                })

                var defeaultArr=[]
                for (var i=0;i<4;i++){
                    defeaultArr[i]=data[i];
                    this.setState({
                        newArr: defeaultArr,
                    })

                }
              //  console.log('defeaultArr',defeaultArr)

               // console.log(this.state.jingpin)
            }
        )

        myfetch.getgirlarticle(
            (data) => {
                this.setState({
                    girl: data,
                })
               // console.log("this.state.girl",this.state.girl)

                var defeaultArra=[]
                var defeaultArrb=[]
                for (var i=0;i<4;i++){
                    defeaultArra[i]=data[i];
                    this.setState({
                        girlArr: defeaultArra
                    })

                }
                for (var j=0;j<3;j++){
                    defeaultArrb[j]=data[j];
                    this.setState({
                        girlArrtwo: defeaultArrb
                    })

                }

               // console.log('defeaultArr',defeaultArra)

            }
        )

        myfetch.getboyarticle(
            (data) => {
                this.setState({
                    boy: data,
                })
                //console.log("this.state.boy",this.state.boy)

                var defeaultArra=[]
                var defeaultArrb=[]
                for (var i=0;i<4;i++){
                    defeaultArra[i]=data[i];
                    this.setState({
                        boyArr: defeaultArra
                    })

                }
                for (var i=0;i<3;i++){
                    defeaultArrb[i]=data[i];
                    this.setState({
                        boyArrtwo: defeaultArrb
                    })

                }

                // console.log('defeaultArr',defeaultArra)

            }
        )

        myfetch.getchangxiao(
            (data)=>{
                this.setState({
                    changxiaoone:data[0],
                    changxiaotwo:[data[1],data[2],data[3],data[4]]
                })

                //console.log('this.state.changxiaoone.',this.state.changxiaotwo)
            }
        )

        myfetch.getjingxuanshudan(
            (data)=>{
                this.setState({
                    jingxuanshudan:data,

                })

               // console.log('this.state.jingxuanshudan.',this.state.jingxuanshudan)
            }
        )

        myfetch.gethomelist(
            (data)=>{
                this.setState({
                    homelist:data,

                })

                //console.log('this.state.homelist.',this.state.homelist)
            }
        )

    }


    changejingpin(nextprops) {
        var a=this.state.num1+1
        this.setState({
            num1 : a
        })

        var trunjp=document.getElementById('trunjp')
        trunjp.style.transform='rotate('+a *180+'deg)'

       // console.log(123)
        var jingpinArr = [];

        var testArr = []
        this.state.jingpin.map((item, index) => {
            jingpinArr.push(item)
        })
        //console.log('jingpinArr',jingpinArr)
        for (var i = 0; i < 4; i++) {
            var num = Math.floor(Math.random() * jingpinArr.length);
            testArr[i] = jingpinArr[num]

            jingpinArr.splice(num, 1);
            this.setState({
                aaa: testArr,
                newArr:testArr
                })

 }
   }


    changegirlarticle(){
        var a=this.state.num+1
        this.setState({
            num : a
        })

        var trun=document.getElementById('trun')
        trun.style.transform='rotate('+a *180+'deg)'

        var jingpinArr = [];

        var testArr = []
        var testArr2 = []
        this.state.girl.map((item, index) => {
            jingpinArr.push(item)
        })
        //console.log('jingpinArr',jingpinArr)
        for (var i = 0; i < 4; i++) {
            var num = Math.floor(Math.random() * jingpinArr.length);
            testArr[i] = jingpinArr[num]

            jingpinArr.splice(num, 1);
            this.setState({

                girlArr:testArr
            })
           // console.log('girlArr',this.state.girlArr)
        }
        for (var i = 0; i < 3; i++) {
            var num2 = Math.floor(Math.random() * jingpinArr.length);
            testArr2[i] = jingpinArr[num2]

            jingpinArr.splice(num, 1);
            this.setState({

                girlArrtwo:testArr2
            })
           // console.log('girlArrtwo',this.state.girlArrtwo)
        }
    }

    changeboyarticle(){
        var a=this.state.num2+1
        this.setState({
            num2 : a
        })

        var trunboy=document.getElementById('trunboy')
        trunboy.style.transform='rotate('+a *180+'deg)'
        var jingpinArr = [];

        var testArr = []
        var testArr2 = []
        this.state.boy.map((item, index) => {
            jingpinArr.push(item)
        })
        //console.log('jingpinArr',jingpinArr)
        for (var i = 0; i < 4; i++) {
            var num = Math.floor(Math.random() * jingpinArr.length);
            testArr[i] = jingpinArr[num]

            jingpinArr.splice(num, 1);
            this.setState({

                boyArr:testArr
            })
            // console.log('girlArr',this.state.girlArr)
        }
        for (var i = 0; i < 3; i++) {
            var num2 = Math.floor(Math.random() * jingpinArr.length);
            testArr2[i] = jingpinArr[num2]

            jingpinArr.splice(num, 1);
            this.setState({

                boyArrtwo:testArr2
            })
            // console.log('girlArrtwo',this.state.girlArrtwo)
        }
    }

    transform(){

    }

    render() {



        return (
            <div className="box">
                <nav>
                    <ul>
                        <Link to='/feilei'>
                            <span></span>
                            <p>分类</p>
                        </Link>
                        <Link to='/paihang'>
                            <span className='home_s1'></span>
                            <p>排行</p>
                        </Link>
                        <Link to='/girl'>
                            <span className='home_s2'></span>
                            <p>女频</p>
                        </Link>
                        <Link to='/boy'>
                            <span className='home_s3'></span>
                            <p>男频</p>
                        </Link>
                        <Link to='/shudan'>
                            <span className='home_s4'></span>
                            <p>书单</p>
                        </Link>
                    </ul>

                </nav>
                <div className='home_undernav'>
                    <p>最近阅读：都市之兵王归来</p>
                    <span> > </span>
                </div>
                <div className='home_img'>
                    <img src="http://img-tailor.11222.cn/pm/book/operate/2018020715462184.jpg" alt=""/>
                </div>
                <div className='home_title'>
                    <span></span>
                    <p>精品推荐</p>
                </div>

                <div className='jingpinlist'>
                    <ul>{
                    this.state.newArr.map((item, index) => {
                        return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                        <div>    <img src={item.book_cover} alt=""/></div>
                            <span>   {item.bookname}</span>
                           <p> {item.author_name}</p>
                            </Link>)
                    })

                }
                    </ul>
                </div>


                <div className='change' onClick={this.changejingpin.bind(this)}>
                    <p>换一换</p>
                    <span className='icon ' id='trunjp'>&#xe604;</span>
                </div>

                <div className='home_title'>
                    <span></span>
                    <p>女生美文</p>
                </div>

                <div className='jingpinlist'>
                    <ul>{
                        this.state.girlArr.map((item, index) => {
                            return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                <div>    <img src={item.book_cover} alt=""/></div>
                                <span>   {item.bookname}</span>
                                <p> {item.author_name}</p>
                            </Link>)
                        })}

                    </ul>
                </div>
                <div className='girllistbox'>


                    <ul className='girllist2'>

                        {
                            this.state.girlArrtwo.map((item, index) => {
                                return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                <div>
                                    <span className='bookname'>   {item.bookname}</span>
                                    <p>
                                        <span className='stat_name'> {item.stat_name}</span>
                                        <span className='first_cate_name'>   {item.first_cate_name}</span>
                                    </p>
                                </div>

                                    <span className='introduction'>   {item.introduction}</span>
                                </Link>)
                            })

                        }

                    </ul>
                </div>


                <div className='change' onClick={this.changegirlarticle.bind(this)}>
                    <p>换一换</p>
                    <span className='icon ' id='trun'>&#xe604;</span>
                </div>


                <div className='home_title'>
                    <span></span>
                    <p>男生美文</p>
                </div>
                <div className='jingpinlist'>
                    <ul>{
                        this.state.boyArr.map((item, index) => {
                            return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                <div>    <img src={item.book_cover} alt=""/></div>
                                <span>   {item.bookname}</span>
                                <p> {item.author_name}</p>
                            </Link>)
                        })}

                    </ul>
                </div>
                <div className='girllistbox'>


                    <ul className='girllist2'>

                        {
                            this.state.boyArrtwo.map((item, index) => {
                                return (<Link to={'/detail/'+item.bid+'/'+item.author} key={index}>
                                    <div>
                                        <span className='bookname'>   {item.bookname}</span>
                                        <p>
                                            <span className='stat_name'> {item.stat_name}</span>
                                            <span className='first_cate_name'>   {item.first_cate_name}</span>
                                        </p>
                                    </div>

                                    <span className='introduction'>   {item.introduction}</span>
                                </Link>)
                            })

                        }

                    </ul>
                </div>
                <div className='change' onClick={this.changeboyarticle.bind(this)}>
                    <p>换一换</p>
                    <span className='icon' id='trunboy'>&#xe604;</span>
                </div>

                <div className='home_title'>
                    <span></span>
                    <p>书旗畅销榜</p>
                </div>

                <Link to={'/detail/'+this.state.changxiaoone.bid+'/'+this.state.changxiaoone.author} key={this.state.changxiaoone.bid} className='home_changxiaoone'>
                    <div className='image'><img src={this.state.changxiaoone.book_cover} alt=""/></div>
                    <div className='detail'>
                        <span>{this.state.changxiaoone.bookname}</span>
                        <span>{this.state.changxiaoone.author_name}</span>

                        <p>{this.state.changxiaoone.introduction
                        }</p>
                        <div className='muchspan'>
                            <span>{this.state.changxiaoone.stat_name}</span>
                            <span>{this.state.changxiaoone.first_cate_name}</span>
                            <span>{this.state.changxiaoone.class_name}</span>

                        </div>
                    </div>
                </Link>

                <ul className='home_changxiaotwo'>

                        {this.state.changxiaotwo.map((item,index)=>{
                            return(
                                <Link to={'/detail/'+item.bid+'/'+item.author} key={index}>

                                        <div>
                                            <span>{index+1}</span>
                                            <span>{item.bookname}</span>
                                        </div>
                                        <div>
                                            <span>{item.stat_name}</span>
                                            <span>{item.class_name}</span>
                                        </div>

                                </Link>
                            )


                        })}


                </ul>
                <div className='change' >
                    <p>查看更多</p>
                    <span></span>
                </div>

                <div className='home_title'>
                    <span></span>
                    <p>精品书单</p>
                </div>
                <ul className='shudanlist'>
                    {
                        this.state.jingxuanshudan.map((item,index)=>{

                            return(<li key={index}>
                                <div className='shudantitle'>
                                    <span>{item.title}</span>
                                    <p>{item.sdesc}</p>


                                </div>
                                <div className='shudanimage'>
                                    <span className='img1'><img src={item.items[0].cover} alt=""/></span>
                                    <span className='img2'><img src={item.items[1].cover} alt=""/></span>
                                    <span className='img3'><img src={item.items[2].cover} alt=""/></span>
                                </div>
                            </li>)
                        })
                    }
                </ul>
                <div className='change' >
                    <p>查看更多</p>
                    <span></span>
                </div>

                <div className='home_title'>
                    <span></span>
                    <p>根据你的阅读兴趣为你推荐</p>
                </div>
                <ul className='homelist'>
                    {
                        this.state.homelist.map((item,index)=>{
                            return(<Link to={'/detail/'+item.bid+'/'+item.author} key={item.bid}>
                                <div className='imgs'>
                                    <img src={item.book_cover
                                    } alt=""/>
                                </div>
                                <div className='discribe'>
                                    <span className='bookname'>{item.bookname}</span>
                                    <span>{item.author_name}</span>
                                    <p>{item.introduction}</p>
                                    <div className='spans'>
                                        <span className='fontcolor'>{item.stat_name}</span>
                                        <span>{item.class_name}</span>
                                        <span>{item.first_cate_name}</span></div>
                                </div>
                            </Link>)
                        })
                    }
                </ul>
            </div>)
    }

}

export default Home
